<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>主从表配置服务</title>

    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>
    <!--toast-->
    <link href="../metronic/assets/global/plugins/jquery.toast.css " rel="stylesheet"/>
    <script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../metronic/assets/global/plugins/jquery.toast.min.js" type="text/javascript"></script>

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="../metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="../metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="../metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
    <link href="../metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet"
          type="text/css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.min.css"/>
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="../metronic/assets/global/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>
    <!-- END PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="../metronic/assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table.css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-editable.css"/>
    <link rel="stylesheet" type="text/css"
          href="../metronic/assets/global/plugins/bootstrap/css/bootstrap-table-fixed-columns.css"/>
    <link href="../theme/zTree/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        .form-horizontal .form-group {
            margin-right: 0px;
            margin-left: 0px;
        }

        .table {
            border-top: solid 3px #F3565D;
        }

        #tab_left .active {
            border-left: solid 3px #F3565D;
        }

        .select2-container .select2-choice {
            height: 30px !important;
            border-radius: 4px !important;
        }

        .tableft {
            margin-left: 90px !important;
        }

        .portlet-body {
            height: 100vh;
        }

    </style>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content "
      style="width: 98%; background: #0f0; background-color: transparent;">
<div class="row" style="margin-top:16px;">
    <!--Begin Right Content-->
    <div class="col-md-12">
        <div class="portlet box blue-steel">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-globe"></i>主从表查询服务
                </div>
                <div class="actions">
                    <a id="btn_back" href="javascript:;" class="btn btn-default btn-sm">
                        <i class="fa fa-backward"></i> 返回
                    </a>
                </div>
            </div>
            <div class="portlet-body" >
                <div class="tabbable-custom nav-justified">
                    <ul id="myTab" class="nav nav-tabs nav-justified disable">
                        <li class="active">
                            <a id="a_tab_m" href="#tab_1_1_1" data-toggle="tab">
                                主表配置信息
                            </a>
                        </li>
                        <li>
                            <a id="a_tab_d" href="#tab_1_1_2" data-toggle="tab">
                                从表配置信息
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content" style="overflow: auto">
                        <div class="tab-pane active" id="tab_1_1_1">
                            <ul id="tab_right" class="nav nav-pills nav-justified steps"
                                style="border:solid 1px #337AB7;">
                                <li class="active">
                                    <a href="#tab_1_1" data-toggle="tab" class="step">
											<span class="number">
											1 </span>
                                        <span class="desc">
											<i class="fa fa-check"></i> 主表信息配置</span>
                                    </a>
                                </li>
                                <li>
                                    <a id="a_tab_1_2" href="#tab_1_2" data-toggle="tab" class="step"
                                       style="border-left:solid 1px #337AB7; border-right:solid 1px #337AB7;">
											<span class="number">
											2 </span>
                                        <span class="desc">
											<i class="fa fa-check"></i> 主表显示列配置</span>
                                    </a>
                                </li>
                                <li>
                                    <a id="a_tab_1_3" href="#tab_1_3" data-toggle="tab" class="step">
											<span class="number">
											3 </span>
                                        <span class="desc">
											<i class="fa fa-check"></i> 主表查询列配置</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_1_1"
                                     style="margin-top:40px; overflow:auto;">
                                    <div class="form-horizontal form-body form-inline">
                                        <div class="form-group tableft">
                                            <label class="col-md-4 control-label"
                                                   style="text-align:right;">数据库标识:</label>
                                            <div class="col-md-4">
                                                <select id="dbkey" name="dbkey"
                                                        class="form-control input-inline input-medium">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin-left:65px;">
                                            <label class="col-md-4 control-label" style="text-align:right;">&nbsp;&nbsp;&nbsp;&nbsp;服务ID:</label>
                                            <div class="col-md-4">
                                                <input id="guid" name="guid" type="text"
                                                       class="form-control input-inline input-medium"
                                                       placeholder="服务ID唯一,不能重复"/>
                                            </div>
                                        </div>
                                        <hr/>
                                        <div class="form-group tableft">
                                            <label class="col-md-4 control-label" style="text-align:right;">&nbsp;&nbsp;&nbsp;&nbsp;服务名称:</label>
                                            <div class="col-md-4">
                                                <input id="serviceName" name="serviceName" type="text"
                                                       class="form-control input-inline input-medium"
                                                       placeholder="请输入服务名称"/>
                                            </div>
                                        </div>
                                        <div class="form-group" style="margin-left:55px;">
                                            <label class="col-md-4 control-label" style="width:130px; margin-left:0px;">是否分页:</label>
                                            <div class="col-md-4" style="width:130px;">
                                                <div class="radio-list" style="margin-left:20px;">
                                                    <label class="radio-inline">
                                                        <input type="radio" name="radioPagintion" id="pagintion1"
                                                               value="0"/>否</label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="radioPagintion" id="pagintion2"
                                                               value="1" checked="checked"/>是</label>
                                                </div>
                                            </div>
                                        </div>

                                        <hr/>

                                        <div class="form-group" style="margin-left:55px;">
                                            <label class="col-md-4 control-label" style="width:160px; margin-left:0px;">响应模式:</label>
                                            <div class="col-md-4" style="width:150px;">
                                                <div class="radio-list" style="margin-left:20px;">
                                                    <label class="radio-inline">
                                                        <input type="radio" name="radioResponseMode" id="responseMode_single"
                                                               value="1" />单行
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="radioResponseMode" id="responseMode_multiple"
                                                               value="0" checked="checked"/>多行
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group" style="margin-left:200px;">
                                            <label class="col-md-2 control-label" style="margin-top:20px;">备注:</label>
                                            <div class="col-md-8">
                                                <textarea id="remark" name="remark" rows="3"
                                                          class="form-control input-inline input-large"></textarea>
                                            </div>
                                        </div>
                                        <!--<hr/>-->
                                        <!--<div class="form-group tableft">-->
                                        <!--<label class="col-md-4 control-label" style="width:126px;">是否缓存:</label>-->
                                        <!--<div class="col-md-4" style="width:250px;">-->
                                        <!--<div class="radio-list" style="margin-left:20px;">-->
                                        <!--<label class="radio-inline">-->
                                        <!--<input type="radio" name="radioSysCatch" id="sysCatch1"-->
                                        <!--value="0" checked="checked"/>否</label>-->
                                        <!--<label class="radio-inline">-->
                                        <!--<input type="radio" name="radioSysCatch" id="sysCatch2"-->
                                        <!--value="1"/>是</label>-->
                                        <!--</div>-->
                                        <!--</div>-->
                                        <!--</div>-->
                                        <!--<div class="form-group" style="margin-left:70px; width:365px;">-->
                                        <!--<label class="col-md-4 control-label">缓存时间:</label>-->
                                        <!--<div class="col-md-4" style="width:225px;">-->
                                        <!--<input id="catchtime" name="catchtime" type="text" readonly="readonly"-->
                                        <!--class="form-control input-inline input-small"/>分钟-->
                                        <!--</div>-->
                                        <!--</div>-->
                                        <hr/>
                                        <div class="form-group tableft">
                                            <label class="col-md-4 control-label"
                                                   style="text-align:right; margin-left:5px;">选择主表:</label>
                                            <div class="col-md-4">
                                                <select id="dtconfigID" name="dtconfigID"
                                                        class="js-example-basic-single input-inline input-medium">
                                                </select>
                                            </div>
                                        </div>

                                        <hr/>
                                        <button id="btn_save" type="button" class="btn blue-steel"
                                                style="margin-left:125px; width:80px;">保&nbsp;&nbsp;&nbsp;&nbsp;存
                                        </button>
                                        <span id="errorInfo" style="color:red; margin-left:20px;"></span>
                                        <hr/>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab_1_2">
                                    <div class="table-toolbar" style="margin-bottom:0px;">
                                        <div class="btn-group">
                                            <button id="btn_showAdd" class="btn blue-steel"><i class="fa fa-plus"></i>新增显示列
                                            </button>
                                        </div>
                                        <div class="btn-group">
                                            <button id="btn_showUpdate" class="btn blue-steel"><i class="fa fa-plus"></i>修改显示列
                                            </button>
                                        </div>
                                        <div class="btn-group">
                                            <button id="btn_showDel" class="btn blue-steel"><i class="fa fa-remove"></i>删除显示列
                                            </button>
                                        </div>
                                    </div>
                                    <table id="tb_showfieldList"></table>
                                </div>
                                <div class="tab-pane" id="tab_1_3">
                                    <iframe id="queryIframe" name="queryIframe"
                                            style="width:100%; height:100vh; border:solid 0px red;" src=""></iframe>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane" id="tab_1_1_2">
                            <div class="row" style="margin-left:0;">
                                <!-- <div class="col-md-1 col-sm-1 col-xs-1" style="padding-left:0px;"> -->
                                <!--     <ul id="tab_left" class="nav nav-tabs tabs-left"> -->
                                <!--         <li class="active"> -->
                                <!--             <a id="a_fieldconfig_2_1" href="#tab_2_1" data-toggle="tab">从表列表 </a> -->
                                <!--         </li> -->
                                <!--         <\!-- <li> -\-> -->
                                <!--         <\!--     <a id="a_fieldconfig_2_2" href="#tab_2_2" data-toggle="tab">从表维护 </a> -\-> -->
                                <!--         <\!-- </li> -\-> -->
                                <!--     </ul> -->
                                <!-- </div> -->
                                <div>
                                    <div class="tab-content" style=" overflow:auto;">
                                        <div class="tab-pane active" id="tab_2_1">
                                            <div id="toolbar_fieldconfig" class="table-toolbar"
                                                 style="margin-bottom:0px;">
                                                <div class="btn-group">
                                                    <button id="btn_detailEndit" class="btn blue-steel"><i
                                                            class="fa fa-edit"></i>修改
                                                    </button>
                                                </div>
                                                <div class="btn-group">
                                                    <button id="btn_detailDel" class="btn blue-steel"><i
                                                            class="fa fa-remove"></i>删除
                                                    </button>
                                                </div>
                                                <div class="btn-group">
                                                    <button id="btn_showAddSlaveTable" class="btn blue-steel"><i class="fa fa-plus"></i>从表新增
                                                    </button>
                                                    <!-- <button id="btn_showUpdateSlaveTable" class="btn blue-steel"><i class="fa fa-plus"></i>从表修改 -->
                                                    <!-- </button> -->
                                                </div>
                                            </div>
                                            <table id="tb_detail"></table>
                                        </div>
                                        <!-- <div class="tab-pane" id="tab_2_2"> -->
                                        <!-- </div> -->

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--Begin End Content-->
</div>
<!-- 隐藏域Begin -->
<input type="hidden" id="isedit" name="isedit"/>
<input type="hidden" id="hid_guid" name="hid_guid"/>
<input type="hidden" id="hid_dguid" name="hid_dguid"/>
<input type="hidden" id="hid_servertype" name="hid_servertype"/>
<input type="hidden" id="hid_operate" name="hid_operate"/>
<input type="hidden" id="hid_projectid" name="hid_projectid"/>
<!-- 隐藏域End -->
<!-- Begin新增查询字段弹窗 -->
<div id="FieldModul" class="modal fade" tabindex="-1" aria-hidden="true">
    <div id="FieldDialog">
        <div class="modal-content">
            <div class="modal-header" style="padding:8px; background-color:#4276A4;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <span class="modal-title" style="color:#fff; font-size:16px;">新增查询字段列表</span>
            </div>
            <div class="modal-body">
                <iframe id="fieldIframe" name="fieldIframe" style="width:100%; min-height:500px; border:solid 0px red;"
                        src=""></iframe>
            </div>
        </div>
    </div>
</div>

<div id="slaveTableModule" class="modal fade" tabindex="-1" aria-hidden="true">
    <div id="slaveTableDialog" class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="padding:8px; background-color:#4276A4;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <span class="modal-title" style="color:#fff; font-size:16px;">从表关系维护</span>
            </div>
            <div class="modal-body">
                <div class="form-horizontal form-body form-inline">
                    <div class="form-group ">
                        <label class="col-md-4 control-label"
                                style="text-align:right; margin-left:7px;">选择从表:</label>
                        <div class="col-md-4">
                            <select id="ddtconfigid" name="ddtconfigid"
                                    class=" form-control input-inline input-medium">
                            </select>
                        </div>
                    </div>
                    <hr/>

                    <div class="form-group " style="margin-right:20px;">
                        <label class="col-md-2 control-label"
                                style="text-align:right; margin-left:30px; width:100px;">从表别名:</label>
                        <div class="col-md-4">
                            <input id="slaveTableCustomAlias" type="text" style="width:240px" class="form-control input-inline"/>
                        </div>
                    </div>
                    <hr/>

                    <div class="form-group ">
                        <label class="col-md-2 control-label" style="text-align:right; margin-left:35px;">关联字段:</label>
                        <div class="col-md-5">
                            <div>
                                <label class="control-label" style="display:block;width:180px;text-align:center">主表字段</label>

                                <select id="mfiled" name="mfiled" style="width:180px"
                                        class="form-control input-inline ">
                                </select>
                           </div>
                        </div>
                        <div class="col-md-4">
                            <div>
                                <label class="control-label" style="display:block;width:180px;text-align:center">从表字段</label>


                                <select id="dfiled" name="dfiled" style="width:180px"
                                        class="form-control input-inline ">
                                </select>
                            </div>
                        </div>
                    </div>
                    <hr/>

                    <div class="form-group " style="margin-right:20px;">
                        <label class="col-md-2 control-label"
                                style="text-align:right; margin-left:38px;">备注:</label>
                        <div class="col-md-4">
                            <textarea id="dremark" name="dremark" rows="3" style="width:410px" class="form-control input-inline"></textarea>
                        </div>
                    </div>
                    <hr/>
                    <button id="btn_dsave" type="button" class="btn blue-steel"
                            style="margin-left:137px; width:80px;">保&nbsp;&nbsp;&nbsp;&nbsp;存
                    </button>
                    <span id="derrorInfo" style="color:red; margin-left:20px;"></span>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- End新增查询字段弹窗 -->
<!--<script src="../metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>-->
<script src="../metronic/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="../metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.min.js"
        type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../metronic/assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-editable.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-editable.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootstrap/js/bootstrap-table-fixed-columns.js"
        type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/select2/select2.min.js" type="text/javascript"></script>
<script src="../metronic/assets/global/plugins/select2/select2_locale_zh-CN.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script src="../js/zTree/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="../metronic/custom/commDialogs.js" type="text/javascript"></script>
<script src="../js/serviceConfigration/masterDetailServer.js" type="text/javascript"></script>
</body>
</html>
